<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib">

	<a4j:keepAlive beanName="transactionController"/>
	<a4j:keepAlive beanName="selectNaturalPersonExtPartyHelper"/>
	<h:form>
		<style type="text/css">
			.introCol1 {
				vertical-align:top;
				width:30%;
			}
			.introCol2 {
				vertical-align:top;
				width:70%;
			}
		</style>
		
		<div align="center">
			<strong>#{messages['intro.partydata']}</strong>
		</div>
		<rich:separator lineType="solid"/>
		<br/>
		<h:panelGrid width="100%" columns="2" columnClasses="introCol1,introCol2">
			<h:outputText value="#{messages['intro.partyid']}:" />
			<h:panelGroup>
				<h:panelGroup id="identGroup">
					<h:inputText id="identidadCiudadano" value="#{transactionController.partyNationalIdentity}" required="true"
							readonly="true"
							requiredMessage="Valor requerido"
							validatorMessage="Valor muy corto">
						<f:validateLength minimum="13" />
						<a4j:support event="onblur" />
					</h:inputText>
				</h:panelGroup>
				<a4j:commandLink ajaxSingle="true" oncomplete="#{rich:component('selectPartyPanel')}.show()">
					<f:setPropertyActionListener target="#{selectNaturalPersonExtPartyHelper.partyIdField}" value="transactionController.partyId" />
					<f:setPropertyActionListener target="#{selectNaturalPersonExtPartyHelper.identityField}" value="transactionController.partyNationalIdentity" />
					<f:setPropertyActionListener target="#{selectNaturalPersonExtPartyHelper.partyNameField}" value="transactionController.partyName" />
					<f:setPropertyActionListener target="#{selectNaturalPersonExtPartyHelper.reRenderComponents}" value="identGroup, ciudadanoGroup" />
					<h:outputText value="#{messages['intro.search']}" />
				</a4j:commandLink>

				<rich:message style="color:Red;" for="identidadCiudadano" />
			</h:panelGroup>

			<h:outputText value="#{messages['intro.fullname']}:"/>
			<h:panelGroup>
				<a4j:region renderRegionOnly="true">
					<h:panelGroup id="ciudadanoGroup">
						<h:inputText id="nombreCiudadano" value="#{transactionController.partyName}"
								required="true"
								readonly="true"
								requiredMessage="El nombre es requerido"
								validatorMessage="Nombre muy corto"
								style="width:265px;">
							<f:validateLength minimum="3" />
							<a4j:support event="onblur" />
						</h:inputText>
					</h:panelGroup>
					<rich:message style="color:Red;" for="nombreCiudadano" />
					
					
					
					
				</a4j:region>
				
				
			</h:panelGroup>

			<h:outputText value="#{messages['intro.cashierscode']}:"/>
			<h:panelGroup>
				<a4j:region renderRegionOnly="true">
					<h:inputText id="cashiersCode" value="#{transactionController.cashiersCode}"
							label="#{messages['intro.cashierscode']}"
							required="true"
							style="width:265px;">
						<a4j:support event="onblur" />
					</h:inputText>
					
					<rich:message style="color:Red;" for="cashiersCode" />
				</a4j:region>
			</h:panelGroup>
			
			<h:outputText value="#{messages['intro.payment']}:"/>
			<h:panelGroup>
				<a4j:region renderRegionOnly="true">
					<h:inputText id="payment" value="#{transactionController.payment}"
							label="#{messages['intro.payment']}"
							required="true"
							requiredMessage="El nombre es requerido"
							validatorMessage="Nombre muy corto"
							style="width:265px;">
						<a4j:support event="onblur" />
					</h:inputText>
					
					<rich:message style="color:Red;" for="payment" />
				</a4j:region>
			</h:panelGroup>

			<h:outputText value="#{messages['intro.description']}:" />
			<h:panelGroup>
				<a4j:region renderRegionOnly="true">
					<h:inputTextarea id="descripcion" value="#{transactionController.description}" required="true"
						rows="5" cols="30"
						requiredMessage="Valor requerido"
						validatorMessage="Valor muy corto">
						<f:validateLength minimum="3" />
						<a4j:support event="onblur" />
					</h:inputTextarea>
				
					<rich:message style="color:Red;" for="descripcion" />
				</a4j:region>
			</h:panelGroup>
		</h:panelGrid>

		<br />
		<h:selectBooleanCheckbox id="adjuntaArchivos"
				value="#{transactionController.attachInfo}"/>
		<h:outputLabel value="#{messages['intro.attachinfo']}" for="adjuntaArchivos"/>

		<br />
		<br />
		<br />
         
		<a4j:commandButton value="#{messages['intro.next']} >>" action="#{transactionController.hasAttachedFiles}"/>
		<a4j:commandButton value="#{messages['intro.close']}" oncomplete="#{rich:component('panelProcesos')}.hide()" />
	</h:form>	
</ui:composition>
